<template>
  <view style="width: 100%">
    <view
      @click="change"
      :style="{
        color: addressString ? 'rgb(48, 49, 51)' : '#c0c4cc'
      }"
    >
      {{ addressString || '请选择地址' }}
    </view>
    <u-picker mode="region" @confirm="confirm" v-model="show"> </u-picker>
    <u-input
      type="textarea"
      :auto-height="false"
      v-if="formatType === 'areas-detail'"
      placeholder="请填写详细地址"
      v-model="state.detail"
      :disabled="disabled"
      :border="true"
    />
  </view>
</template>


<script>
  import mpConfig from '../../libs/mixin/mp-vertual-node.js';
  import { isEqual } from '@/utils';

  export default {
    name: 'u-address',
    options: mpConfig,
    emits: ['update:value'],
    props: {
      value: {
        type: [Object, String],
        default: () => ({
          address: [],
          detail: ''
        })
      },
      formatType: {
        type: String,
        default: 'areas-detail'
      },
      customOptions: {
        type: Array,
        default: () => []
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        params: {
          province: true,
          city: true,
          county: true
        },

        state: {
          address: [],
          detail: ''
        },
        show: false
      };
    },
    computed: {
      addressString() {
        return this.state.address.join('/');
      }
    },
    watch: {
      value: {
        handler(val) {
          let addressInfo = val;
          if (typeof val === 'string') {
            const addressArr = val.split('/');
            const [province, city, area, ...detail] = addressArr ?? [];
            const address = [];
            if (city) {
              province && address.push(province);
              city && address.push(city);
              area && address.push(area);
              addressInfo = {
                address,
                detail: detail.join('/')
              };
            } else {
              addressInfo = {
                address,
                detail: province
              };
            }
          }
          // 如果不一样，重新复制
          if (!isEqual(this.state, addressInfo)) {
            this.state = addressInfo;
          }
        },
        immediate: true
      },
      state: {
        handler(newVal) {
          if (typeof this.value === 'string') {
            const address = newVal.address ? newVal.address.join('/') : '';
            const detail = this.formatType === 'areas-detail' ? newVal.detail : '';
            const allPath = address ? `${address}${detail ? '/' + detail : ''}` : `${detail}`;
            this.$emit('update:value', allPath);
          } else {
            this.$emit('update:value', newVal);
          }
        },
        deep: true
      }
    },
    methods: {
      change() {
        if (this.disabled) return;
        this.show = true;
      },
      confirm(e) {
        this.state.address = e.fullRegion;
        this.show = false;
      }
    }
  };
</script>

<style scoped></style>
